<template>
  <el-dropdown trigger="click" @command="handleThemeChange">
    <el-button class="theme-toggle" :icon="Sunny" circle />
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item command="light">
          <div class="theme-option">
            <div class="theme-preview light"></div>
            <span>浅色主题</span>
          </div>
        </el-dropdown-item>
        <el-dropdown-item command="dark">
          <div class="theme-option">
            <div class="theme-preview dark"></div>
            <span>深色主题</span>
          </div>
        </el-dropdown-item>
        <el-dropdown-item command="blue">
          <div class="theme-option">
            <div class="theme-preview blue"></div>
            <span>蓝色主题</span>
          </div>
        </el-dropdown-item>
        <el-dropdown-item command="purple">
          <div class="theme-option">
            <div class="theme-preview purple"></div>
            <span>紫色主题</span>
          </div>
        </el-dropdown-item>
        <el-dropdown-item command="green">
          <div class="theme-option">
            <div class="theme-preview green"></div>
            <span>绿色主题</span>
          </div>
        </el-dropdown-item>
        <el-dropdown-item command="orange">
          <div class="theme-option">
            <div class="theme-preview orange"></div>
            <span>橙色主题</span>
          </div>
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup lang="ts">
import { Sunny } from '@element-plus/icons-vue'
import { useThemeStore } from '@/stores/theme'

const themeStore = useThemeStore()

const handleThemeChange = (theme: string) => {
  themeStore.setTheme(theme)
}
</script>

<style scoped lang="scss">
.theme-toggle {
  border: none;
  background: transparent;
  color: var(--el-text-color-primary);
  
  &:hover {
    background: var(--el-color-primary-light-9);
    color: var(--el-color-primary);
  }
}

.theme-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

.theme-preview {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 2px solid var(--el-border-color);
}

.theme-preview.light {
  background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
}

.theme-preview.dark {
  background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
}

.theme-preview.blue {
  background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
}

.theme-preview.purple {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.theme-preview.green {
  background: linear-gradient(135deg, #10b981 0%, #047857 100%);
}

.theme-preview.orange {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}
</style>